<template>
	<view>
		<view style="height: 18upx;"></view>
		<view class="form-view">
			<view class="form-item">
				<view class="form-label">项目名称</view>
				<view class="form-content">辽宁中宇纵横融资租赁有限公司债权项目十期</view>
			</view>
			<view class="form-item">
				<view class="form-label">项目名称</view>
				<view class="form-content">35万元</view>
			</view>
			<view class="form-item">
				<view class="form-label">协议类型</view>
				<view class="form-content">
					<view class="radio-group">
						<RadioView :active="protocolType == 1" @click="protocolType = 1">电子协议</RadioView>
						<RadioView :active="protocolType == 2" @click="protocolType = 2">纸质协议</RadioView>
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-label">电子协议</view>
				<view class="form-content row-start" @click="isDialog = true">
					<image src="/static/electronic-protocol.png" class="electronic-protocol"></image>
					<view>立即签名</view>
				</view>
			</view>
		</view>

		<view class="headline-view">
			<view class="headline-text">支付方式</view>
		</view>

		<view class="form-view">
			<view class="form-item">
				<view class="cell-view">
					<view class="label-view">
						<view>万小宝</view>
						<view class="label-desc">余额不足, 充值后立即可用</view>
					</view>
					<view class="pay-but" @click="isPaymentDialog = true">充值</view>
				</view>
			</view>
			<view class="form-item">
				<RadioView :active="bankType == 1" @click="bankType = 1">中国银行（尾号3940）</RadioView>
			</view>
			<view class="form-item">
				<RadioView :active="bankType == 2" @click="bankType = 2">招商银行（尾号3940）</RadioView>
			</view>
		</view>
		<view class="headline-view">
			<view class="headline-text">联系信息</view>
		</view>

		<view class="form-view">
			<view class="form-item radio-view">
				<RadioView :active="relation == 1" @click="relation = 1">
					<view>宋先生 · 18640848388</view>
					<view>辽宁省大连市高新技术产业园区亿阳路三丰大厦C座2402室</view>
				</RadioView>
			</view>
			<view class="form-item radio-view">
				<RadioView :active="relation == 2" @click="relation = 2">
					<view>宋先生 · 18640848388</view>
					<view>辽宁省大连市高新技术产业园区亿阳路三丰大厦C座2402室</view>
				</RadioView>
			</view>
		</view>
		<view style="height: 260upx;"></view>

		<SignatureDialog v-if="isDialog" @confirm="onConfirm"></SignatureDialog>
		<PaymentPasswordDialog v-if="isPaymentDialog" @close="isPaymentDialog = false" @confirm="onPaymentConfirm" />
		<FloatView>
			<FloatButton>确认</FloatButton>
		</FloatView>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isDialog: false,
				isPaymentDialog: false,
				protocolType: 1,
				bankType: 1,
				relation: 1,
			}
		},
		onLoad() {},
		onShow() {},
		methods: {
			onPaymentConfirm(event) {
				console.log(event)
				this.isPaymentDialog = false
				uni.redirectTo({
					url: '/pages/succeedPage/succeedPage'
				})
			},
			onConfirm(event) {
				console.log(event)
				this.isDialog = false
			}
		}
	}
</script>

<style scoped lang="scss">
	.desc-text {
		width: 100%;
		padding: 0 45upx;
		margin-top: 34upx;
		font-size: 25rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #B8ACA3;
	}

	.radio-view {
		/deep/.radio-item {
			align-items: flex-start;

			.radio-dot {
				margin-top: 10upx;
			}
		}
	}

	.form-view {
		width: 707rpx;
		margin: 0 auto;
		padding: 0 29upx;
		background: #FFFFFF;
		border-radius: 14rpx;

		.form-item {
			width: 100%;
			padding: 29upx 0;
			@extend .row-between;
			align-items: flex-start;

			.cell-view {
				width: 100%;
				@extend .row-between;

				.label-view {
					@extend .row;
					font-size: 29rpx;
					font-weight: 400;
					color: #2C1101;

					.label-desc {
						font-size: 25rpx;
						font-weight: 400;
						color: #FF2615;
						margin-left: 18upx;
					}
				}

				.pay-but {
					width: 116rpx;
					height: 53rpx;
					background: #FF2615;
					border-radius: 7rpx;
					@extend .column;
					font-size: 25rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}
			}

			.form-label {
				font-size: 29rpx;
				font-weight: 400;
				color: #B8ACA3;
			}

			.form-content {
				width: calc(100% - 160upx);
				font-size: 29rpx;
				font-weight: 400;
				color: #2C1101;

				.electronic-protocol {
					width: 36upx;
					height: 34upx;
					margin-right: 18upx;
				}

				.radio-group {
					@extend .row-start;

					.radio-item+.radio-item {
						margin-left: 70upx;
					}
				}
			}
		}

		.form-item+.form-item {
			border-top: 1px solid #F7E8E4;
		}
	}

	.headline-view {
		width: 100%;
		padding: 0 50upx;
		@extend .row-between;
		margin-bottom: 24upx;
		margin-top: 36upx;

		.headline-text {
			font-size: 29rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			color: #2C1101;
			position: relative;

			&:before {
				content: "";
				position: absolute;
				left: 0;
				bottom: 0;
				width: 56rpx;
				height: 14rpx;
				background: rgba(255, 38, 21, 0.1);
			}

		}

		.headline-copy {
			@extend .row;
			font-size: 25rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #FF2615;

			.copy-icon {
				width: 29upx;
				height: 29upx;
				margin-right: 7upx;
			}
		}
	}
</style>